Vue.component("login",{
    template:`<div>
        <slot name="nologin" v-if="myinfo==null">
            <a href="#" >注册</a>
            <a href="#" @click.prevent="showLogin=true">登录</a>
        </slot>
        <slot name="logined" v-else :myinfo="myinfo">
            <span>{{myinfo[props.usernameColumn]}}</span>
            <a href="#" @click.prevent="logout">退出</a>
        </slot>
        <el-dialog title="登录" :visible.sync="showLogin">
          <el-form :model="form">
            <el-form-item label="账号" :label-width="100">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="密码" :label-width="100">
              <el-input v-model="form.password" autocomplete="off" type="password"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showLogin = false">取 消</el-button>
            <el-button type="primary" @click="login">确 定</el-button>
          </div>
        </el-dialog>
    </div>`,
    data(){
        return{
            myinfo:null,
            props:null,
            form:{username:"",password:""},
            showLogin: false
        }
    },
    created(){
        axios.get("/auth/props")
            .then(res=> {
                this.props = res.data;
                return axios.get("/auth/myinfo");
            }).then(res=>this.myinfo=res.data.data);
    },
    methods:{
        login(){
            let p = new URLSearchParams();
            p.append("username",this.form.username);
            p.append("password",this.form.password);
            axios.post("/auth/login",p)
                .then(res=>{
                    if(res.data.code==1){
                        this.myinfo=res.data.data;
                        this.showLogin=false;
                    } else {
                        this.$alert(res.data.msg);
                    }
                });
        },
        logout(){
            axios.post("/auth/logout")
                .then(res=>{
                    if(res.data.code==1){
                        this.myinfo=null;
                    }
                });
        }
    }
})